<script setup>
  const openNewTab = (url) => {
    window.open(url, '_blank');
  }
</script>

<template>
  <div class="use_cases_box">
    <div class="h_title wow animate__animated animate__fadeInUp">Use Cases</div>
    <div class="content">
      <div class="top">
        <div class="item">
          <div class="title wow animate__animated animate__fadeInUp">
            <div class="name">Fully On-Chain Games</div>
            <div class="des">
              Experience the future of gaming with <br> complete transparency and verifiability
            </div>
          </div>
          <div class="card card_left">
            <div class="card_item wow animate__animated animate__fadeInUp">
              <div class="one">
                <div class="bg_text">
                  Strategy Games With <div>Complex State</div> Management
                </div>
              </div>
              <div class="two">
                <div class="bg_text">
                  Multiplayer RPGs With <div>Verifiable Player</div> Interactions
                </div>
              </div>
            </div>
            <div class="card_item wow animate__animated animate__fadeInUp">
              <div class="three">
                <div class="bg_text">
                  Collectible Card Games With Provably Fair Card Draws
                </div>
              </div>
              <div class="fouth">
                <div class="bg_text">
                  On-Chain Esports With <div>Tamper-Proof</div>Match Results
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="title wow animate__animated animate__fadeInUp">
            <div class="name">Decentralized Finance</div>
            <div class="des">
              Enhance the security and efficiency of<br>financial applications
            </div>
          </div>
          <div class="card card_right">
            <div class="card_item wow animate__animated animate__fadeInUp">
              <div class="one">
                <div class="bg_text">Decentralized Exchanges <div>With Private Order Books</div></div>
              </div>
              <div class="two">  
                <div class="bg_text">Lending Protocols With<div>Zero-Knowledge Credit</div>Scoring</div>
              </div>
            </div>
            <div class="card_item wow animate__animated animate__fadeInUp">
              <div class="three">  
                <div class="bg_text">Yield Farming Platforms<div>With Verifiable Reward</div>Calculations
              </div>
              </div>
              <div class="fouth">  
                <div class="bg_text">Cross-Chain Asset<div>Bridges With Efficient</div>Proof Generation</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom wow animate__animated animate__fadeInUp">
        <div class="left">
          <img src="@/assets/images/logo.jpg" alt="">
          <div @click="openNewTab('https://twitter.com/thezkcross')" class="close">X</div>
          <div @click="openNewTab('https://t.me/ZKCross')">Telegram</div>
          <div @click="openNewTab('https://discord.com/invite/aJNjfRvgam')">Discord</div>
        </div>
        <div class="right">
          <div>About</div>
          <div>Products</div>
          <div>Network</div>
          <div>Resources</div>
          <div>Use Cases</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.use_cases_box {
  width: 100%;
  .h_title {
    font-weight: 600;
    font-size: 40px;
    color: #000000;
    padding-left: 2.6%;
    line-height: 1;
  }
  .content {
    background-image: linear-gradient(to bottom right, #010C22, #0B354D);
    border-radius: 15px;
    padding: 3.58% 2.63%;
    margin-top: 3.2%;
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 3.48%;
      background: #FFFFFF;
      border-radius: 20px;
      margin-top: 3.2%;
      font-size: 20px;
      .left {
        display: flex;
        img {
          width: 30px;
        }
        .close {
          margin-left: 50px;
        }
        div {
          margin-right: 20px;
          color: #191919;
          cursor: pointer;
        }
      }
      .right {
        display: flex;
        div {
          margin-left: 30px;
          color: #000000;
        }
      }
    }
    .top {
      display: flex;
      .item {
        background: linear-gradient( 180deg, rgba(255,255,255,0.47) 0%, rgba(129,141,153,0) 100%);
        border-radius: 10px;
        padding: 2.56% 2.78%;
        flex: 1;
        margin-right: 2.45%;
        &:last-child {
          margin-right: 0px;
        }
        .card_right {
          .one {
            background-image: url('@/assets/images/user_5.png');
          }
          .two {
            background-image: url('@/assets/images/user_6.png');
          }
          .three {
            background-image: url('@/assets/images/user_7.png');
          }
          .fouth {
            background-image: url('@/assets/images/user_8.png');
          }
        }
        .card_left {
          .one {
            background-image: url('@/assets/images/user_1.png');
          }
          .two {
            background-image: url('@/assets/images/user_2.png');
          }
          .three {
            background-image: url('@/assets/images/user_3.png');
          }
          .fouth {
            background-image: url('@/assets/images/user_4.png');
          }
        }
        .card {
          margin-top: 5.5%;
          .card_item {
            width: 100%;
            margin-top: 27px;
            display: flex;
            >div {
              flex: 1;
              margin-right: 6.6%;
              padding-top: 3.7%;
              padding-bottom: 3.6%;
              position: relative;
              color: #Fff;
              font-weight: 500;
              font-size: 17px;
              border-radius: 5px;
              background-repeat: no-repeat; /* 确保图片不重复 */
              background-size: cover; /* 背景图片覆盖元素 */
              background-position: center center; /* 背景图片居中 */
              .bg_text {
                padding-left: 18px;
                line-height: 22px;
                box-sizing: border-box;
              }
              &:last-child {
                margin-right: 0px;
              }
            }
          }
        }
        .title {
          background-image: linear-gradient(to bottom right, #010C22, #0B354D);
          // background: linear-gradient( 134deg, #010C21 0%, #145A73 100%);
          border: 1px solid #DEDEDE;
          padding: 33px 32px;
          border-radius: 10px;
          .name {
            color: #FFFFFF;
            font-weight: 600;
            font-size: 38px;
          }
          .des {
            font-weight: 300;
            font-size: 20px;
            color: #FFFFFF;
            margin-top: 13px;
            line-height: 30px;
          }
        }
      }
    }
  }
}
</style>
